<!DOCTYPE HTML>
<html>


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="#0A5AF9">
    <title>在线支付</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/online-payment_2.css" />
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/public-head.css" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            background-color: #EEEEEE;
            /*咋不起效果*/
        }

        .mui-table-view:before,
        .mui-table-view-cell:after {
            position: absolute;
            right: 0;
            left: 0;
            height: 0px;
            content: '';
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
            background-color: #c8c7cc;
            top: -1px;
        }
        /*去掉底部线条*/

        .mui-table-view:after {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 0px;
            content: '';
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
            background-color: #c8c7cc;
        }
    </style>

</head>

<body>
    <div class="main">
        <div class="paymenr-time">
            <div>
                <div>支付剩余时间</div>
                <div id="timer"></div>
            </div>
            <div>
                <span id="ser_project">普洗</span>
                <span></span>
                <span style="padding-right:15px;">￥&nbsp;<span id="price_top"></span></span>
            </div>
        </div>
        <!--支付方式-->
        <div class="mode">选择支付方式</div>
        <div class="mode-opt">
            <ul class="mui-table-view mui-table-view-radio" id="Paylist">
                <li class="mui-table-view-cell Pli" style="display: none;">
                    <a class="mui-navigate-right">
                        <img src="../image/icon/wwx@2x.png" / class="mui-pull-left">
                        <p>钱包</p>
                    </a>
                </li>
                <li class="mui-table-view-cell Pli">
                    <a class="mui-navigate-right">
                        <img src="../image/icon/details-weixin.png" / class="mui-pull-left">
                        <p>微信</p>
                    </a>
                </li>
                <li class="mui-table-view-cell Pli mui-selected list-border">
                    <a class="mui-navigate-right">
                        <img src="../image/icon/zhifub@2x.png" / class="mui-pull-left">
                        <p>支付宝</p>
                    </a>
                </li>
            </ul>
        </div>
        <!--底部-->
        <div class="confirm" tapmode onclick="orderdetails()">
            <div>确认支付￥<span id="price_bottom"></span></div>
        </div>
    </div>
    <!--弹窗-->
    <!--<div class='demo'>
    <div class='demo-bg'>
    <div class='demo-txt' tapmode onclick="closeDialog()">
        	<p>支付成功 !</p>
         <a href="mine_2.html">返回首页</a>
    </div>
    </div>-->


</body>
<script type="text/javascript" src="../script/public-head.js"></script>
<script type="text/javascript" src="../script/rem.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script type="text/javascript">
    //1订单ID,2支付宝引入,3支付方式4微信支付引入
    var pay_order, aliPay, pay_way, wxPay;
    apiready = function() {
        // 引入支付宝支付模块
        aliPay = api.require('aliPay');
        // 引入微信支付模块
        wxPay = api.require('wxPay');
        console.log(JSON.stringify(api.pageParam));
        pay_order = api.pageParam.OrderId;
        // 价钱
        $api.byId('price_top').innerHTML = api.pageParam.Service_price;
        $api.byId('price_bottom').innerHTML = api.pageParam.Service_price;
        // 服务方式
            $api.byId('ser_project').innerHTML = api.pageParam.project;
    }
    headInner({
        title: "",
        //headleft
        headl: '<a  style="color:white" class="mui-icon mui-icon-left-nav" tapmode onclick="api.closeWin()"></a>',
        //headright
        headr: '<a style="color:white"></a>',
        color: "", //默认是蓝色
        padding: "0px 0px 0px",
    })

    //倒计时
    var maxtime = 15 * 60; //一个小时，按秒计算，自己调整!
    function CountDown() {
        if (maxtime >= 0) {
            minutes = Math.floor(maxtime / 60);
            seconds = Math.floor(maxtime % 60);
            msg = minutes + "分" + seconds + "秒";
            document.all["timer"].innerHTML = msg;
            // if (maxtime == 5 * 60) alert("还剩5分钟");
            --maxtime;
        } else {
            clearInterval(timer);
            //                  alert("时间到，结束!");
        }
    }
    timer = setInterval("CountDown()", 1000);


    // 点击支付
    function orderdetails() {
        var select_list = document.getElementsByClassName("Pli");
        for (var i = 0; i < select_list.length; i++) {
            if (select_list[i].getAttribute('class').indexOf('mui-selected') > -1) {
                if (i == 0) {
                    // 钱包支付
                } else if (i == 1) {
                    // 微信支付
                    pay_way = "wepay";
                    Pay_ali(pay_way, pay_order)
                } else if (i == 2) {
                    // 支付宝支付
                    pay_way = "alipay"
                    Pay_ali(pay_way, pay_order)
                }
            }
        }
    }

    // 支付  1.支付方式,2订单号ID
    function Pay_ali(PayWay, PayOrder) {
        BASE.MYajax({
            'pathName': 'order/payment', //请求路径
            'methods': 'post',
            'ajaxData': {
                values: {
                    orders_id: PayOrder,
                    pay_type: PayWay
                }
            },
            'method': payBackData //调用函数
        });
    }
    function payBackData(ret, err) {
        if (pay_way == "alipay") {
            if (ret.code == 200) {
                // 阿里支付
                aliPay.payOrder({
                    orderInfo: ret.data
                }, function(ret, err) {
                    // 检测支付结果
                    // alert(ret.code)
                    console.log(JSON.stringify(ret));
                    check_pay()
                });
            } else {
                reToast(ret,err);
            }
        } else if (pay_way == "wepay") {
            // 微信支付
            console.log("wepay: " + JSON.stringify(ret));
            if (ret && ret.code == 200) {
                var wxinfo = {
                    'appKey': ret.data.appid,
                    'orderId': ret.data.prepayid,
                    'mchId': ret.data.partnerid,
                    'nonceStr': ret.data.noncestr,
                    'package': ret.data.package,
                    'timeStamp': ret.data.timestamp,
                    'sign': ret.data.sign
                }
                console.log("微信支付参数： " + JSON.stringify(wxinfo));
                wxPay.payOrder(wxinfo, function(ret, err) {
                    // alert(1)
                    console.log(JSON.stringify(ret))
                    if (ret.status) {
                        //支付成功
                        api.toast({
                          msg: '微信支付成功',
                          duration: 2000,
                          location: 'bottom',
                          global: true,
                        });
                        // 检测支付结果
                        console.log("微信成功");
                        check_pay()

                    } else {
                        api.toast({
                            msg: '微信支付失败:' + err.code,
                            duration: 2000,
                            location: 'bottom'
                        });
                    }
                });
            } else {
                api.toast({
                    msg: '微信支付失败',
                    duration: 2000,
                    location: 'bottom'
                });
            }
        }
    }
    // 查询订单支付状况
    function check_pay() {
        BASE.MYajax({
            'pathName': 'order/getPayResult', //请求路径
            'methods': 'get',
            'ajaxData': {
                values: {
                    orders_id: pay_order
                }
            },
            'method': Check_payBackData //调用函数
        });
    }
    function Check_payBackData(ret, err) {
        if (ret.code == 200) {
            console.log(JSON.stringify(ret));
            if (ret.data.is_pay == 1) {
                api.toast({
                    msg: "支付成功",
                    duration: 2000,
                    location: 'bottom',
                    global: true
                });
                api.openWin({
                    name: 'order-details',
                    url: '../html/order-details.html',
                    slidBackEnabled: false,
                    pageParam: {
                        //  1订单号Id,2支付方式3下单时间4服务项目5下单方式
                        Orderid: pay_order,
                        payWay: pay_way,
                        order_number: api.pageParam.order_num,
                        created_time: api.pageParam.created_order,
                        pay_price: api.pageParam.Service_price,
                        server_way: api.pageParam.ser_way,
                    }
                });
            } else if (ret.data.is_pay == 0) {
                api.toast({
                    msg: "支付失败",
                    duration: 2000,
                    location: 'bottom',
                    global: true
                });
            }
        } else {
            reToast(ret, err)
        }
    }


    //弹窗
    /*var demobg = document.querySelector(".demo-bg");
    var demotxt = document.querySelector(".demo-txt");
    function openDialog() {
        demotxt.style.display = "block";
        demobg.style.display = "block";
    }

    function closeDialog() {
        demotxt.style.display = "none";
        demobg.style.display = "none";
    }*/
</script>

</html>
